<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>DStation后台管理</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">

    <!-- Custom CSS -->
    <link th:href="@{/boostrapTemplatResources/dist/css/sb-admin-2.css}" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/morrisjs/morris.css}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link th:href="@{/boostrapTemplatResources/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">

    <!-- boostrap table -->
    <link th:href="@{/boostrap_table/css/bootstrap-table.min.css}" rel="stylesheet">
    <link th:href="@{/boostrap_table/css/jquery.treegrid.min.css}" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/css/adminLoginCss/font-awesome.min.css}">
    <style type="text/css">
        input.number {
            display: inline-block;
            width: 72px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-image: url(/images/inputNumberType/bg_number_box1.png);
            background-repeat: no-repeat;
            background-size: 72px 20px;
            border: none;
            cursor: pointer;
        }

        input.number:focus {
            background-image: url(/images/inputNumberType/bg_number_box2.png);
            border: none;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div th:include="admin/header :: header"></div>
    <div th:include="admin/sidebar :: sidebar"></div>
</nav>

<div id="wrapper">
    <!-- 主界面显示D站介绍信息 -->
    <div id="page-wrapper">
        <!-- 存放视频的分类信息的table -->
        <br/>
        <button class="btn btn-success" id="addButton">增加类型</button>
        <br/>
        <br/>
        <table id="table"  class="table table-bordered">
            <thead>
            <tr>
                <th>编号</th>
                <th>持续时长</th>
                <th>价格</th>
                <th>折扣</th>
                <th>创建日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr th:each="vipTypeInfo : ${vipTypeInfoList}">
                    <td th:text="${vipTypeInfo.vipTypeId}"></td>
                    <td th:text="${vipTypeInfo.durationDays} + '  天'"></td>
                    <td th:text="${vipTypeInfo.vipTypePrice} + '  元'"></td>
                    <td th:text="${vipTypeInfo.discount}"></td>
                    <td th:text="${vipTypeInfo.createDate}"></td>
                    <td><a class="btn btn-primary btn-xs" th:onclick="'editInfo('+${vipTypeInfo.vipTypeId}+ ',' + ${vipTypeInfo.durationDays} + ',' +${vipTypeInfo.vipTypePrice}+ ',' +${vipTypeInfo.discount} +')'">修改</a>
                        &nbsp;  &nbsp;
                        <a class="btn btn-danger btn-xs" th:onclick="'deleteInfo('+${vipTypeInfo.vipTypeId}+')'">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->

<!-- 模态框 -->
<div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">时间类型修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <input type="text" hidden="hidden" id="updateVipTypeId"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">持续时长(天)</label>
                        <div  class="col-sm-10">
                            <input min="1" max="10000000" class="number" value="1" id="updateDurationDays" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="updateVipTypePrice" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">折扣</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="updateDiscount" required/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateConfirmButton">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 增加模态框 -->
<div class="modal fade" id="addModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">时间类型增加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">持续时长(天)</label>
                        <div  class="col-sm-10">
                            <input min="1" max="10000000" class="number" value="1" id="addDurationDays" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="addVipTypePrice" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">折扣</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="addDiscount" required/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addConfirmButton">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>

<!-- boostrap table -->
<script th:src="@{/boostrap_table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/boostrap_table/js/bootstrap-table-treegrid.js}"></script>
<script th:src="@{/boostrap_table/js/jquery.treegrid.min.js}"></script>

<!-- swal alert -->
<script th:src="@{/js/sweetAlert.js}"></script>
</body>
<script>
    window.onload = function changeNumber() {
        $("input.number").click(function (e) {
            var self = $(this);
            var x = e.pageX - self.offset().left;
            var y = e.pageY - self.offset().top;
            var d = 0;
            if (x <= 20) {
                self.css("background-image", "url(/images/inputNumberType/bg_number_box3.png)");
                d = -1;
            }
            if (x >= 50) {
                self.css("background-image", "url(/images/inputNumberType/bg_number_box4.png)");
                d = 1;
            }
            if (d != 0) {
                self.val(Math.min(Math.max((parseInt(self.val()) || 0) + d, parseInt(self.attr("min"))), parseInt(self.attr("max"))));
                setTimeout(function () {
                    self.css("background-image", "");
                }, 200);
            }
        });

    }
    /**
     * 删除一条信息
     */
    function deleteInfo(id) {
        swal({
            title: "确认弹框",
            text: "确定要删除这条信息吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if(flag) {
                $.ajax(
                    {
                        type: "POST",
                        url: "/vipTypeInfo/dropDateTypeVipById",
                        async: false,
                        cache: true,
                        data: {
                            "id": id
                        },
                        success: function (data) {
                            if(data["dropResult"] == true) {
                                swal("删除成功!", {
                                    buttons: false,
                                    timer: 1000
                                });
                                window.location.reload();
                            } else {
                                swal("Error", "删除失败！", "error");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
            }
        } );
    }

    /**
     * 修改一条信息
     * @param id
     */
    function editInfo(id,durationDays,vipTypePrice,discount) {
        //填充模态框的数据
        $("#updateVipTypeId").val(id);
        $("#updateDurationDays").val(durationDays);
        $("#updateVipTypePrice").val(vipTypePrice);
        $("#updateDiscount").val(discount);
        $("#updateModel").modal("show");
    }

    $("#updateConfirmButton").click(
        function () {
            var updateVipTypeIdTxt = $("#updateVipTypeId").val();
            var updateDurationDaysTxt = $("#updateDurationDays").val();
            var updateVipTypePriceTxt = $("#updateVipTypePrice").val();
            var updateDiscountTxt = $("#updateDiscount").val();
            //格式判断
            var updateDurationDaysReg = /^[0-9]{1,6}$/;   //1~6位整数
            var updateVipTypePriceReg = /^[0-9]+.?[0-9]*$/;   // 价格无限制
            var updateDiscountReg = /^0.[0-9]*$/;   //0......
            if(updateDurationDaysReg.test(updateDurationDaysTxt) === false || updateDurationDaysTxt === null || updateDurationDaysTxt === "") {
                swal("Error", "天数须为1-6位整数！", "error");
                return;
            } else if(updateVipTypePriceReg.test(updateVipTypePriceTxt) === false || updateVipTypePriceTxt === null || updateVipTypePriceTxt === "") {
                swal("Error", "会员价格格式错误！", "error");
                return;
            } else if(updateDiscountReg.test(updateDiscountTxt) === false || updateDiscountTxt === null || updateDiscountTxt === "") {
                swal("Error", "折扣格式错误！", "error");
                return;
            }
            $.ajax(
                {
                    type: "POST",
                    url: "/vipTypeInfo/modifyDateTypeVipById",
                    async: false,
                    cache: true,
                    data: {
                        "vipTypeId":updateVipTypeIdTxt,
                        "vipTypePrice" : updateVipTypePriceTxt,
                        "discount" : updateDiscountTxt,
                        "durationDays" : updateDurationDaysTxt
                    },
                    success: function (data) {
                        if(data["modifyResult"] == true) {
                            swal("修改成功!", {
                                buttons: false,
                                timer: 1000
                            });
                            window.location.reload();
                        } else {
                            swal("Error", "修改失败！", "error");
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
    );

    $("#addButton").click( function() {
        //1. 清除以前的内容
        $("#addDurationDays").val("1");
        $("#addVipTypePrice").val("");
        $("#addDiscount").val("");
        //2. 显示模态框
        $("#addModel").modal("show");
    });

    $("#addConfirmButton").click(
        function () {
            var addDurationDaysTxt = $("#addDurationDays").val();
            var addVipTypePriceTxt = $("#addVipTypePrice").val();
            var addDiscountTxt = $("#addDiscount").val();
            //格式判断
            var addDurationDaysTxtReg = /^[0-9]{1,6}$/;   //1~6位整数
            var addVipTypePriceTxtReg = /^[0-9]+.?[0-9]*$/;   // 价格无限制
            var addDiscountTxtReg = /^0.[0-9]*$/;   //0......
            if(addDurationDaysTxtReg.test(addDurationDaysTxt) === false || addDurationDaysTxt === null || addDurationDaysTxt === "") {
                swal("Error", "天数须为1-6位整数！", "error");
                return;
            } else if(addVipTypePriceTxtReg.test(addVipTypePriceTxt) === false || addVipTypePriceTxt === null || addVipTypePriceTxt === "") {
                swal("Error", "会员价格格式错误！", "error");
                return;
            } else if(addDiscountTxtReg.test(addDiscountTxt) === false ||addDiscountTxt === null || addDiscountTxt === "") {
                swal("Error", "折扣格式错误！", "error");
                return;
            }
            $.ajax(
                {
                    type: "POST",
                    url: "/vipTypeInfo/saveDateTypeVipInfo",
                    async: false,
                    cache: true,
                    data: {
                        "vipTypePrice" : addVipTypePriceTxt,
                        "discount" : addDiscountTxt,
                        "durationDays" : addDurationDaysTxt
                    },
                    success: function (data) {
                        if(data["saveResult"] == true) {
                            swal("添加成功!", {
                                buttons: false,
                                timer: 1000
                            });
                            window.location.reload();
                        } else {
                            swal("Error", "添加失败！", "error");
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
    );
</script>
</html>
